<template>
<div class="app">
  <indexLeft ref="projleft" @filtercatalogue='filtercatalogue' @leftstatus='leftstatus' ></indexLeft>
  <div class="document-right">
  <el-container>
  <el-header style="margin-bottom: 10px;">
    <div class="app_project_app">
      <div class="app_header">项目({{total}})</div>
      <div>
        <el-popover placement="bottom" trigger="hover">
					<div class="popover-content-bottom">
						<span class="popover-content-top-title" @click="catalogue">新建目录</span>
						<span class="popover-content-top-title" @click="projectAdd">新建项目</span>
					</div>
					<el-button slot="reference" size="medium" type="primary"  v-permission="'proj:form:add'" icon='el-icon-plus'>新建</el-button>
				</el-popover>
      </div>
    </div>
  </el-header>
  <el-main>
       <div class="app_header_search">
         <div class="app_header">
           <div style="margin-right:15px">
           <el-input placeholder="请输入内容" @input="inputchange" v-model="projName" @keyup.enter.native="keyupenter" slot="preprnd" ></el-input>
           </div>
           <filterType ref="tagsForm" @tagsFormchang="tagsFormchang" :status='status'></filterType>
            <span class="container_top_heard_span" @click="empty">清空</span>
         </div>
         <!-- <div>
              <el-dropdown trigger="click" @command="handleCommand"  style="margin-right:10px;">
                  <span class="el-dropdown-link">
                    <i class="el-icon-sort app_search"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :class="[sortType=='Default'?'dropdownslect':'dropdown']"  command="Default"><i v-if="sortType=='Default'" class="el-icon-check"></i>默认排序</el-dropdown-item>
                    <el-dropdown-item :class="[sortType=='CreationTime'?'dropdownslect':'dropdown']"   command="CreationTime"><i v-if="sortType=='CreationTime'" class="el-icon-check"></i>创建时间</el-dropdown-item>
                    <el-dropdown-item :class="[sortType=='Updatetime'?'dropdownslect':'dropdown']"   command="Updatetime"><i v-if="sortType=='Updatetime'" class="el-icon-check"></i>更新时间</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
        </div> -->
    </div>
    <div class="app_project">
        <div  :class="[item.childrenshow==false?'app_project_item':'app_project_itemtwo']" v-for="item in  projectlist"  @click="todetails(item)" >
          <div  class="app_project_heard">
            <div>
              <span class="app_project_heard_text">{{item.label}}</span>
              <!-- <span class="app_project_heard_text_span">p1005</span> -->
              <span class="ge_content_left_span" v-for="element in  item.data.tags">{{element.name}}</span>
            </div>
            <div @click.stop style="display:flex;flex-wrap: nowrap;align-items:center">
              <span class="app_project_status">{{item.data.status|textfilters}}</span>
              <el-tooltip class="item" effect="dark" :content="item.data.status|textfilters" placement="right">
                <i :class="item.data.status|iconfilters" class="iconfont" :style="item.data.status|colorfilters"></i>
              </el-tooltip>
            </div>
          </div>
          <div class="app_project_botton">
            <div class="app_project_botton_avater">
               <img class="app_project_botton_avater_image" :src="item.data.masterSysUser.avatar?item.data.masterSysUser.avatar:'https://img2.baidu.com/it/u=2277413437,2773342262&fm=253&fmt=auto&app=120&f=JPEG?w=516&h=500'" />
               <span class="app_project_botton_avater_text">{{item.data.masterSysUser?item.data.masterSysUser.userName:" "}}</span>
            </div>
            <div class="app_project_botton_xin">
                <el-tooltip class="item" effect="dark" content="项目成员" placement="right">
                    <div class="app_project_botton_xin_div" >
                      <i class="iconfont icon-yonghu1 app_project_botton_icon"> </i>
                      <span>{{item.data.userList.length}}</span>
                    </div>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="项目里程碑" placement="right">
                   <div class="app_project_botton_xin_div">
                     <i class="el-icon-date app_project_botton_icon"></i>
                     <span>{{item.data.mptNum}}</span>
                   </div>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="项目任务" placement="right">
                  <div class="app_project_botton_xin_div">
                    <i class="el-icon-document app_project_botton_icon"> </i>
                      <span>{{item.data.taskNum}}</span>
                  </div>
                </el-tooltip>
            </div>
          </div>
          <div class="eldiv" @click.stop="childrenshowclick(item)" v-if="!item.isLeaf">
            <i :class="[item.childrenshow==false?'el-icon-arrow-down':'el-icon-arrow-up']"></i>
          </div>
            <div  :class="[item.childrenshow==false?'projcharinone':'projcharintwo']" v-if="item.childrenshow==true" @click.stop>
                	<el-tree  style="background-color: rgb(242, 245, 253);" lazy :load="loadClick" :props="props"  :data="item.children" node-key="id"  :expand-on-click-node="false" >
					          <span class="custom-tree-node" slot-scope="{ node, data }">
					      	  <span class="document-left-tree-span">{{data.label}}</span>
                    <el-tooltip class="item" effect="dark" content="查看子项目" placement="right">
                      <!-- <div class="document-left-tree-span_i"> -->
                          <i class="el-icon-right" style=" color: #2c7ef8;" @click='projchildrenfunction(data)'></i>
                      <!-- </div> -->

                    </el-tooltip>
				          	</span>
			          	</el-tree>
            </div>
        </div>
        <div class="proj_pagination">
        <el-empty description="暂无项目" v-cloak v-if="projectlist.length==0&&elempty==true"></el-empty>

        </div>
    </div>
  </el-main>
  <el-footer>
  	<div class="proj_pagination">
				<pagination v-show="total>0" :pageSizes='[12, 24, 36, 48]' :total="total" :current.sync="current" :size.sync="size" @pagination="listclick"/>
			</div>
  </el-footer>
  </el-container>
  </div>
</div>

</template>
<script>
import permission from '@/directive/permission'
import pagination from "@/components/Pagination";
import indexLeft from "./components/indexLeft";
import { getTreeData } from "@/api/project";
import * as echarts from "echarts";
import filterType from "@/components/projectComponents/filterType";
import utils from "@/utils/utils";
export default {
  components: {
    filterType,
    indexLeft,
    pagination,
  },
  data() {
    return {
      sortType: "Default",
      projectType: "",
      great: false,
      projectlist: [],
      projectTree: [],
      current: 1,
      size:12,
      total: 0,
      dirId:'',
      props:{isLeaf:'isLeaf'},
      status:'',
      isMyMaster:0,
      projName:"",
      elempty:false
    };
  },
  filters: {
    iconfilters(val){
      if(val=='00'){return 'icon-shuangyuanquan-copy'}
      else if(val=='01'){return 'icon-shuangyuan'}
      else if(val=='02'){return 'icon-yiwancheng-copy'}
      else if(val=='03'){return 'icon-yemian-1'}
      else if(val=='04'){return 'icon-yemian-1'}
    },
    colorfilters(val){
      if(val=='00'){return 'color:rgb(250, 145, 31)'}
      else if(val=='01'){return 'color:rgb(69, 240, 210)'}
      else if(val=='02'){return 'color:rgb(70, 216, 171)'}
      else if(val=='03'){return 'color:rgb(248, 120, 103)'}
      else if(val=='04'){return 'color:rgb(255,165,0)'}
    },
    textfilters(val){
      if(val=='00'){return '待确认'}
      else if(val=='01'){return '进行中'}
      else if(val=='02'){return '已完成'}
      else if(val=='03'){return '已终止'}
      else if(val=='04'){return '已中止'}
    },
  },
  created() {
    this.listclick();
  },
  methods: {
    inputchange(data){
      if(utils.isNull(data)){
        this.projName=data
        this.listclick();
      }
    },
    keyupenter(e){
       var keyCode = window.event? e.keyCode:e.which;
       this.projName= e.target.value;
      if(keyCode == 13){
       this.listclick();
   }},
      tagsFormchang(data){
      this.status=data
      this.listclick()
    },
    leftstatus(data){
      if(data===1){
        this.isMyMaster=data
        this.status=""
        this.listclick()
      }else if(utils.isNull(data)){
        this.isMyMaster=0
        this.status=""
        this.listclick()
      }else {
        this.isMyMaster=0
        this.status=data
        this.listclick()
      }
    },
    empty(){
      this.$refs.tagsForm.clear()
      this.$refs.projleft.clear()
    },
    filtercatalogue(id){
      this.dirId=id
      this.listclick()
    },
		catalogue(){
      this.$refs.projleft.fatherdir()
    },
    childrenshowclick(item) {
      console.log(item);
      var _this = this;
      item.childrenshow = !item.childrenshow;
      let level = Number(item.data.projLevel) + 1;
      getTreeData({ level: level, parentId: item.id }).then((res) => {
        item.children = res.data.data
       })
    },
    loadClick(node, resolve) {
      if (node.level === 0) {
      }
      if (node.level >= 1) {
        let level = Number(node.data.data.projLevel) + 1;
        getTreeData({ level: level, parentId: node.data.data.projId }).then(
          (res) => {
            resolve(res.data.data)
          }
        );
      }
    },
    childrendata(data) {
      data.forEach((element) => {
        if (element.children == null) {
          element.children = [];
        } else {
          this.childrendata(element.children);
        }
      });
      return data;
    },
    async listclick() {
        this.elempty=false
      	let params=new URLSearchParams()
				params.append('current',this.current)
				params.append('size',this.size)
				params.append('dirId',this.dirId)
				params.append('status',this.status)
				params.append('isMyMaster',this.isMyMaster)
				params.append('name',this.projName)
        let res = await getTreeData(params);
        this.projectlist = res.data.data;
        this.total = res.data.total;
        this.projectlist.forEach((data) => {
        this.$set(data, "childrenshow", false);
        });
        this.projectlist = this.childrendata(this.projectlist);
        this.elempty=true

    },
    projchildrenfunction(data){
           this.$router.push({path: "/project/details",query:{id:data.data.projId}});
    },
    projectAdd() {
      this.$router.push({ path: "/project/add" });
    },
    handleNodeC() {},
    todetails(data) {
      this.$router.push({path: "/project/details",query:{id:data.id,dirId:data.data.dirId}});
    },
    handleCommand(item) {
      this.sortType = item;
    },
    projecthandleCommand(item) {
      this.projectType = item;
    },
  },
};
</script>
<style scoped>
.app {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  min-height: 100%;
  align-items: stretch;
}
.document-right {
  flex: 1;
  /* padding: 24px; */
  height: calc(100vh - 84px);
  overflow-y: auto;
  background-color: white;
  /* position: relative; */
}

.app_project_app {
  width: 100%;
  padding: 24px 16px 5px 16px;
  display: flex;
  justify-content: space-between;
}
/deep/.el-main {
  padding-top: 0px;
}
.app_header {
  font-weight: bolder;
  text-transform: none;
  color: rgb(46, 64, 94);
  display: block;
  font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei UI",
    "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
}
.app_header_search {
  padding: 0 16px 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f5f6f8;
  height: 50px;
}
.app_search {
  cursor: pointer;
  font-size: 20px;
}
.dropdown {
  cursor: pointer;
  display: block;
  height: auto;
  text-align: left;
  border: none;
  color: #2e405e;
  padding: 0.71428571rem 1.14285714rem !important;
  font-size: 14px;
  text-transform: none;
  font-weight: 400;
  box-shadow: none;
  line-height: 24px;
}
.dropdownslect {
  cursor: pointer;
  display: block;
  height: auto;
  text-align: left;
  border: none;
  color: #2e405e;
  padding: 0.71428571rem 1.14285714rem !important;
  font-size: 14px;
  text-transform: none;
  font-weight: 400;
  box-shadow: none;
  line-height: 24px;
  background-color: #e8f4ff;
  color: #46a6ff;
}
.selectscc {
  background-color: #e8f4ff;
  color: #46a6ff;
}
.app_project {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  justify-content: flex-start;
  /* padding-bottom: 64px; */
}
.app_project_itemtwo {
  width: 30%;
  min-width: 260px;
  /* height: 155px; */
  border-radius: 8px;
  padding: 12px;
  margin-right: 20px;
  margin-bottom: 20px;
  background-color: rgb(242, 245, 253);
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  cursor: pointer;
  /* overflow: hidden; */
}
.app_project_item {
  width: 30%;
  min-width: 260px;
  height: 115px;
  border-radius: 8px;
  padding: 12px;
  margin-right: 20px;
  margin-bottom: 20px;
  background-color: rgb(242, 245, 253);
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  cursor: pointer;
  /* overflow: hidden; */
}
.app_project_heard {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.app_project_heard_text {
  font-size: 16px;
  font-weight: 700;
  color: rgb(46, 64, 94);
}
.app_project_heard_text_span {
  font-size: 14px;
  font-weight: 500;
  color: rgb(144, 154, 170);
}
.project_icon:hover {
  color: rgb(255, 171, 0);
  cursor: pointer;
}
.icon-xingxing-huang {
  color: rgb(255, 171, 0);
}
.app_project_botton {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 25px;
}
.app_project_botton_avater {
  display: flex;
  align-items: center;
}
.app_project_botton_avater_image {
  width: 23px;
  height: 23px;
  border-radius: 50%;
}
.app_project_botton_avater_text {
  color: rgb(144, 154, 170);
  font-size: 14px;
  line-height: 24px;
  margin-left: 10px;
  display: inline-block;
  width: 100px;
}

.app_project_status{
  color: rgb(144, 154, 170);
  font-size: 14px;
  line-height: 24px;
  margin-left: 10px;
  display: inline-block;
  width: 50px;
}

.app_project_botton_icon {
  font-size: 14px;
}
.app_project_botton_xin {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  width: 150px;
  height: 100%;
  font-family: gitee-icon;
  font-size: 14px;
  font-style: normal;
  color: rgb(144, 154, 170);
}
.project-item-conent-header-right {
  color: #909aaa;
  font-size: 18px;
  cursor: pointer;
}

.project-item-conent-header-right-choose {
  color: #ff991f;
  font-size: 18px;
  cursor: pointer;
}

.project-item-conent-header-right:hover {
  color: #ff991f;
}
.app_project_botton_xin_div {
  /*width: 35px;*/
}
.ge_content_left_span {
  /* width: 30px; */
  border-radius: 5px;
  padding: 2px;
  font-size: 12px;
  display: inline-block;
  color: #2c7ef8;
  border-color: #2c7ef8;
  border: solid 1px #2c7ef8;
  margin-right: 16px;
}
.projcharinone {
  display: none;
}
.projcharintwo {
  display: block;
  transition: height 1s;
}
.eldiv {
  width: 100%;
  text-align: center;
}
.projcharinspan {
  padding: 10px 0px 0px 10px;
  display: flex;
  justify-content: space-between;
}
.proj_pagination {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.custom-tree-node{
    display: flex;
    justify-content: space-between;
}
	.popover-content-top-title {
		color: #2e405e;
		font-size: 14px;
		display: block;
		width: 100%;
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 10px;
		padding-right: 10px;
    text-align: center;
    cursor: pointer;
	}

	.popover-content-top-title:hover {
		background-color: #f5f6f8;
    		color: #2e405e;
		font-size: 14px;
		display: block;
		width: 100%;
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 10px;
		padding-right: 10px;
	}
.container_top_heard_span {
  width: 50px;
  font-size: 14px;
  color: rgb(144, 154, 170);
  margin-left: 10px;
  cursor: pointer;

}
[v-cloak] {
  display:none !important;

}
</style>

